<template>
  <div class="data-source-main" v-if="currentFormServiceVersionVO">
    <el-scrollbar>
      <div style="height: 100%;display: flex;flex-direction: column">
        <el-card>
          <!-- 服务基本信息展示 -->
          <div style="display: flex;justify-content: space-between">
            <el-radio-group v-model="currentFormServiceVersionVO.service.method" disabled class="method-group">
              <el-radio-button value="GET">GET</el-radio-button>
              <el-radio-button value="POST">POST</el-radio-button>
              <el-radio-button value="PUT">PUT</el-radio-button>
              <el-radio-button value="DELETE">DELETE</el-radio-button>
            </el-radio-group>
          </div>
          <el-descriptions :column="2" border class="service-info" label-width="120">
            <el-descriptions-item label="服务ID">{{ currentFormServiceVersionVO.service.id }}</el-descriptions-item>
            <el-descriptions-item label="服务版本ID">{{ currentFormServiceVersionVO.id }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="3" border class="service-info" label-width="120">
            <el-descriptions-item label="名称" width="40%">{{ currentFormServiceVersionVO.service.name }}
            </el-descriptions-item>
            <el-descriptions-item label="标识" width="15%">{{ currentFormServiceVersionVO.service.code }}</el-descriptions-item>
            <el-descriptions-item label="自动运行" width="15%">
              <el-switch v-model="currentFormServiceVersionVO.service.auto">
              </el-switch>
            </el-descriptions-item>
            <el-descriptions-item label="描述">{{ currentFormServiceVersionVO.service.description }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="2" border class="service-info" label-width="120">
            <el-descriptions-item label="当前版本">{{ currentFormServiceVersionVO?.version }}</el-descriptions-item>
            <el-descriptions-item label="当前发布版本">{{ currentCurrentServiceVersionVOs?.version }}
            </el-descriptions-item>
          </el-descriptions>

        </el-card>
        <el-card class="content-section">
          <el-collapse v-model="modelActiveNames" class="custom-collapse">
            <el-collapse-item title="入参模型" name="input">
              <template #title>
                <div style="display: flex;width: 100%">
                  入参模型
                  <span
                    style="margin-left: 10%;color:red">表单提交时，会将表单中组件的值传入到此模型数据对应的字段中。模型中的数据由表单组件的值提供。</span>
                </div>
              </template>
              <div style="display: flex;">
                <ModelCard style="flex-basis: 48%;margin-right: auto"
                           :serviceVersionVO="currentFormServiceVersionVO"
                           title="当前表单模型"
                           :modelType="MODEL_TYPE.INPUT_MODEL"
                           model-from="form"
                />
                <ModelCard style="flex-basis: 48%;"
                           :serviceVersionVO="currentCurrentServiceVersionVOs"
                           :modelType="MODEL_TYPE.INPUT_MODEL"
                           model-from="latest"
                >
                  <template #title>
                    <div style="display: flex;width: 100%">
                      最新表单模型
                      <div style="margin-left: auto;margin-right: 35%">
                        <el-button type="primary" @click="updateFSSVVO('inputModel')">
                          同步服务与数据模型
                        </el-button>
                      </div>
                    </div>
                  </template>
                </ModelCard>
              </div>
            </el-collapse-item>
            <el-collapse-item title="出参模型" name="output">
              <template #title>
                <div style="display: flex;width: 100%">
                  出参模型
                  <span
                    style="margin-left: 10%;color:red">表单加载时，会将此数据模型的值传递到对应表单组件的value中。模型中的数据为表单组件值的来源。</span>
                </div>
              </template>
              <div style="display: flex;">
                <ModelCard style="flex-basis: 48%;margin-right: auto"
                           :serviceVersionVO="currentFormServiceVersionVO"
                           title="当前表单模型"
                           :modelType="MODEL_TYPE.OUTPUT_MODEL"
                           model-from="form"
                />
                <ModelCard style="flex-basis: 48%;"
                           :serviceVersionVO="currentCurrentServiceVersionVOs"
                           :modelType="MODEL_TYPE.OUTPUT_MODEL"
                           model-from="latest"
                >
                  <template #title>
                    <div style="display: flex;width: 100%">
                      最新表单模型
                      <div style="margin-left: auto;margin-right: 35%">
                        <el-button type="primary" @click="updateFSSVVO('outputModel')">
                          同步新数据模型
                        </el-button>
                      </div>
                    </div>
                  </template>
                </ModelCard>
              </div>              <!--              <div v-else>暂无出参模型数据</div>-->
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>

    </el-scrollbar>
  </div>

</template>

<script setup lang="ts">
import { ServiceVersionVOType } from '@coolphk/shared-types/low-code'
import { convertTreeToPathMap } from '@/utils/util'
import { get, cloneDeep, set } from 'lodash-es'
import ModelCard
  from '@/components/form-designer/setting-panel/data-source-setting/subscription-service/components/content/components/model-card.vue'
import eventBus from '@/utils/event-bus'

import { MODEL_TYPE, SERVICE_OPERATION } from '@/utils/constants'

defineOptions({
  name: 'subscription-service-main',
})


interface Props {
  currentFormServiceVersionVO: ServiceVersionVOType
  currentCurrentServiceVersionVOs: ServiceVersionVOType
}


const props = defineProps<Props>()
const emits = defineEmits(['updateCFSVVO'])
const modelActiveNames = ref(['input', 'output'])


/**
 * 更新表单服务版本视图对象
 * 该函数通过比较当前表单服务版本和最新服务版本的模型树，来更新当前服务版本视图对象
 * @param {string} modelType - 模型类型，可以是 'inputModel' 或 'outputModel'
 */
const updateFSSVVO = (modelType: 'inputModel' | 'outputModel') => {
  // 创建当前表单服务版本的模型路径映射
  const cFormMap = new Map()
  // 创建最新服务版本的模型路径映射
  const cLatestMap = new Map()

  // 将当前表单服务版本的模型树转换为路径映射
  convertTreeToPathMap(modelType === 'inputModel' ? props.currentFormServiceVersionVO.inputModelTree : props.currentFormServiceVersionVO.outputModelTree, '', cFormMap)
  // 将最新服务版本的模型树转换为路径映射
  convertTreeToPathMap(modelType === 'inputModel' ? props.currentCurrentServiceVersionVOs.inputModelTree : props.currentCurrentServiceVersionVOs.outputModelTree, '', cLatestMap)

  // 深拷贝最新服务版本视图对象，以避免直接修改原始对象
  const cloneCLSVVO = cloneDeep(props.currentCurrentServiceVersionVOs)

  // 遍历最新服务版本的模型路径映射
  //
  cLatestMap.forEach((value, key) => {
    // 检查当前表单服务版本是否包含对应路径和类型
    if (cFormMap.has(key) && cFormMap.get(key).type === value.type) {
      // 根据模型类型更新最新服务版本视图对象的组件
      if (modelType === 'inputModel') {
        const currentLNode = get(cloneCLSVVO.inputModelTree, value.path)
        currentLNode.component = cFormMap.get(key).component
      } else {
        const currentLNode = get(cloneCLSVVO.outputModelTree, value.path)
        currentLNode.component = cFormMap.get(key).component
      }
    }
  })

  // 触发更新表单服务版本视图对象的事件
  emits('updateCFSVVO', cloneCLSVVO)
}
</script>


<style lang="scss" scoped>
.data-source-main {
  //padding: 0 10px 0 10px;
  margin: 10px;
  height: 100%;

  .content-section {
    margin-top: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    :deep(.ep-tree-node__content) {
      height: auto;
    }
  }

  .service-info {
    margin-bottom: 20px;
  }

  .info-item {
    display: flex;
    align-items: center;
  }


  .label {
    color: var(--ep-text-color-secondary);
    min-width: 70px;
    margin-right: 8px;
    font-size: 14px;
  }

  .value {
    color: var(--ep-text-color-primary);
    font-size: 14px;
  }

  .method-group {
    margin-bottom: 10px;
  }

  .custom-collapse {
    border: none;
    --ep-collapse-header-height: 36px;

    :deep(.ep-collapse-item__header) {
      font-size: 16px;
      font-weight: 500;
      padding: 0 16px;
      border-radius: 4px;
      background-color: var(--ep-color-info-light-9);
    }

    :deep(.ep-collapse-item__content) {
      padding: 20px 16px;
      align-items: center;
    }

    :deep(.ep-collapse-item__wrap) {
      border: none;
    }

    :deep(.ep-tree-node__content) {
      align-items: center;
      margin-bottom: 5px;
    }
  }


}
</style>
